// components/popupPicker.js
Component({
    /**
     * 组件的属性列表
     */
    properties: {
        cellInset: {
            type: Boolean,
            value: false
        },
        cellTitle: {
            type: String
        },
        pickerTitle: {
            type: String
        },
        columns: {
            type: Array,
            value: []
        },
        defaultValue: {
            type: String,
            value: ''
        },
        placeholder: {
            type: String
        },
        required: {
            type: Boolean,
            value: false
        },
        filterable: {
            type: Boolean,
            value: false
        },
        readonly: {
            type: Boolean,
            value: true
        },
        isLink: {
            type: Boolean,
            value: true
        },
        disabled: {
            type: Boolean,
            value: false
        },
        loading: {
            type: Boolean,
            value: false
        },
        fillable: {
            type: Boolean,
            value: false
        },
        valueKey: {
            type: String,
            value: 'name'
        },
        customStyle: {
            type: String,
            value: 'height: 50%;'
        }
    },

    /**
     * 组件的初始数据
     */
    data: {
        columnList: [],
        curItem: {
            id: null,
            name: ''
        },
        popupShow: false,
        searchLeftIcon: 'search',
        searchPlaceholder: '请输入搜索关键字',
        searchValue: ''
    },

    observers: {
        'columns': function (val) {
            this.setData({
                columnList: JSON.parse(JSON.stringify(val))
            })
        },
        'fillable': function (val) {
            if (val) {
                this.setData({
                    searchLeftIcon: '',
                    searchPlaceholder: '可输入或搜索关键字'
                })
            }
        }
    },

    /**
     * 组件的方法列表
     */
    methods: {
        showPopup() {
            if (!this.properties.disabled) {
                this.setData({
                    popupShow: true
                });
                this.triggerEvent('show')
            }
        },

        onCancel() {
            this.setData({
                popupShow: false
            });
            this.triggerEvent('cancel')
        },
        onConfirm({detail}) {
            const _this = this
            //console.log(detail)
            const valStr = JSON.stringify(detail.value);
            let item = {};
            if (valStr !== '{}' && valStr !== '[]') {
                _this._handleConfirm(detail);
            } else if (_this.properties.fillable && _this.data.searchValue !== '') {
                _this._handleConfirm({index: -1, value: {id: -1, name: _this.data.searchValue}});
            }
        },
        _handleConfirm(detail) {
            const _this = this
            _this.setData({
                searchValue: '',
                curItem: detail.value,
                popupShow: false
            }, function () {
                _this.resetColumnList();
                _this.triggerEvent('confirm', detail)
            })
        },

        onPopupClose() {
            this.setData({
                popupShow: false
            });
        },

        reset() {
            this.setData({
                curItem: {
                    id: null,
                    name: ''
                },
                popupShow: false,
                searchValue: ''
            })
        },

        changeSearch({detail}) {
            const _this = this;
            _this.setData({
                searchValue: detail
            }, function () {
                _this.resetColumnList();
            })
        },
        clearSearch() {
            this.resetColumnList();
        },
        blurSearch() {
            this.resetColumnList();
        },
        resetColumnList() {
            const _this = this;
            let list = [];
            if (_this.data.searchValue === undefined || _this.data.searchValue === '') {
                _this.setData({
                    searchValue: ''
                })
                list = JSON.parse(JSON.stringify(_this.properties.columns || []));
            } else {
                list = (_this.properties.columns || []).filter(item => {
                    return (item.name + '').indexOf(_this.data.searchValue) > -1;
                });
            }
            _this.setData({
                columnList: list
            })
        },


    },

    lifetimes: {
        detached() {
            this.setData({
                curItem: {
                    id: null,
                    name: ''
                },
                popupShow: false,
                searchValue: ''
            })
        }
    },
})
